<template>
  <!-- 设计项目进度 -->
    <div class="tobeDone">
        <public-search
                :fields="fields"
                :search-param="form"
                @on-query="onQuery"
                @on-reset="onReset"
        />
        <public-table
                ref="publicTableRef"
                index
                :selection="false"
                :indexWidth="'100'"
                :page="page"
                height="550"
                :tableData="tableData"
                :tableOption.sync="tableOption"
                @page-change="onPageChange"
        >
            <template #productionRate="scope">
              <el-input v-if="scope.row.isEdit" v-model="scope.row.productionRate" @input="scope.row.productionRate=limitInputNum(scope.row.productionRate,3,0,false)"></el-input>
              <span v-else>{{scope.row.productionRate}}</span>
            </template>
            <template #productionValue="scope">
                <el-input v-if="scope.row.isEdit" v-model="scope.row.productionValue" @input="scope.row.productionValue=limitInputNum(scope.row.productionValue,10,4,true)"></el-input>
                <span v-else>{{scope.row.productionValue}}</span>
            </template>
            <template #buttons="scope">
                <div>
                    <el-button v-if="!scope.row.isEdit" class="button_funtion2" size="small" @click="onEdit(scope.row)">编辑</el-button>
                    <div v-if="scope.row.isEdit">
                        <el-button  class="button_funtion2 m-r10" size="small" @click="onSave(scope.row)">保存</el-button>
                        <el-button  class="button_cancel2" size="small" @click="onCancel(scope.row)">取消</el-button>
                    </div>
                </div>
            </template>
        </public-table>
    </div>
</template>

<script setup>
import {onMounted, reactive, ref} from 'vue'
import PublicTable from "@/components/PublicTable";
import PublicSearch from "@/components/PublicSearch";
import {tableCommonFun} from "@/hooks/tableCommon";
import SvgIcon from "@/components/SvgIcon/index.vue";
import {useRouter} from "vue-router";
import {limitInputNum} from "@/common/utils/GlobalUtils";
import {ElMessage} from "element-plus";
import {designProject} from "@/api/project";


const interfaceConfig = reactive({
    fileName:'project',
    apiPath:'designProject.designProjectSchedule',
});

const exportConfig = reactive({
    fileName:'investment',
    apiPath:'projectSetApi.exportProjectSet',
    tableName:'项目集表'
});

/**
 * 默认参数
 * @type {UnwrapNestedRefs<{prepareStatus: number}>}
 */
const defaultParameters = reactive({

});

const {
    form,
    page,
    tableOption,
    tableData,
    onQuery,
    onReset,
    onPageChange,
    getData,
    onExport
}  = tableCommonFun(interfaceConfig,exportConfig,defaultParameters);

form.value = {
    projectQuery:''
}

const fields = ref([
    {   type:'input',
        label:'项目名称',
        key:'projectQuery',
        placeholder:'请输入项目名称',
        clearable:true
    }
]);

tableOption.value = [
    { label: "项目名称", prop: "projectName", minWidth: 100 },
    { label: "任务名称", prop: "taskName", minWidth: 100 },
    { label: "产值比例", prop: "productionRate", minWidth: 100,slot: true, },
    { label: "产值", prop: "productionValue", minWidth: 100,slot: true, },
    { label: "时间", prop: "startTime",formatter: (val, row) => {
         return val?(val + '至' + row.endTime):'-';
        } },
    { label: "天数", prop: "days", minWidth: 100 },
    {
        label: '操作',
        slot: true,
        width: 200,
        overHidden: false,
        slotName: 'buttons',
        fixed: "right"
    },
];

const router = useRouter();

/**
 * 跳转详情/查看
 */
const toDetail = (row) => {
    router.push({path:`/designManagement/contractInformation/contractDraft/status=${row.examineStatus}&contractId=${row.contractId}`})
}

/**
 * 新增
 */
const addHandle = () => {
    router.push({path:`/designManagement/contractInformation/contractDraft/status=`})
}

const contractDialogRef = ref(null);

/**
 * 打开弹窗
 */
const openPopup = (row) => {
    contractDialogRef.value.state.dialogVisible = true;
    contractDialogRef.value.state.contractId = row.contractId;
}

/**
 * 编辑
 */
const onEdit = (row) => {
    row.isEdit = true;
}

/**
 * 取消
 */
const onCancel = (row) => {
    row.isEdit = false;
    page.current = 1;
    page.size = 50;
    getData({
        pageNum:1,
        pageSize:10,
        param:{
            ...form.value
        }
    });
}

/**
 * 保存
 */
const onSave = (row) => {
  if(!row.productionRate){
      return ElMessage.warning('生产比不能为空!');
  }
  if(!row.productionValue){
      return ElMessage.warning('产值不能为空!');
  }
  let params = {
      projectTaskId:row.projectTaskId,
      productionRate:row.productionRate,
      productionValue:row.productionValue
  };
  designProject.editDesignProjectSchedule(params).then(res=>{
    row.isEdit = false;
    if(res.code==='200'){
        ElMessage.success('编辑成功!');
        page.current = 1;
        page.size = 50;
        getData({
            pageNum:1,
            pageSize:10,
            param:{
                ...form.value
            }
        });
    }
  });
}

onMounted(()=>{
    getData({
        pageNum:1,
        pageSize:10,
        param:{
            ...form.value
        }
    });
})
</script>

<style lang="scss" scoped>
.tobeDone {
  width: 100%;
  height: 100%;
}
</style>
